<template>
<a :class="classes" :style="styles" @click="btnHandler" :disabled="isDisabled">
  <et-icon v-if="icon" :name="icon" />
  <span v-if="txt">{{ $t(txt) }}</span>
</a>
</template>

<script>
import EtIcon from './EtIcon';

export default {

  components: {
    EtIcon
  },

  props: {
    styles: {
      type: Object,
      default() {
        return {};
      }
    },
    icon: {
      type: String
    },
    txt: {
      type: String
    },
    handler: {
      type: Function,
      default: () => {}
    },
    isDisabled: {
      type: Boolean
    },
    isHollow: {
      type: Boolean
    },
    isSecondary: {
      type: Boolean
    }
  },

  computed: {
    classes() {
      return {
        'button': true,
        'et-icon-btn': this.icon ? true : false,
        'hollow': this.isHollow,
        'secondary': this.isSecondary
      };
    },

    btnHandler() {
      return this.isDisabled ? () => {} : this.handler;
    }
  }

};
</script>
